<template lang="pug">
  el-row
    el-col.left(:span="12")
      .login-img
        img(src="~assets/images/login.png")
    el-col.right(:span="12")
      .login-right
        el-form.login-rule-form(:model="loginRuleForm", :rules="loginRules", ref="loginRuleForm", label-width="100px")
          .title 店管家农资营销管理系统
          .sub-title 注册
          el-form-item.phone(label="手机号", prop="phone")
            el-input(v-model.number="loginRuleForm.phone", placeholder="输入11位手机号", style="width:300px")
          el-form-item.verification(label="短信验证码", prop="verification")
            el-input(v-model="loginRuleForm.verification", placeholder="输入短信验证码", style="width:150px")
            img
          el-form-item.username(label="用户名", prop="username")
            el-input(v-model="loginRuleForm.username", placeholder="仅支持英文", style="width:300px")
          el-form-item.password(label="设置密码", prop="password")
            el-input(v-model="loginRuleForm.password", placeholder="设置6-16位字符密码", style="width:300px")
          el-form-item.submit
            el-button(plain, v-on:click="loginSubmit('loginRuleForm')") 同意协议并注册
          el-form-item.forget
            .forget-password 《店管家农资供应商服务协议》
            .registered 已有账号？直接登录
          el-form-item.tips 为了您的账号安全，请不要再公共设施上登录！
    footer.footer-tips
      .tips 欢迎拨打客服电话：400-860-3390
      .tips 版权所有：上海劲牛信息技术有限公司
</template>

<script>
  import {isvalidPhone} from '~/plugins/validate'

  //定义一个全局的变量
  const validPhone = (rule, value, callback) => {
    if (!value) {
      callback(new Error('请输入电话号码'))
    } else if (!isvalidPhone(value)) {
      callback(new Error('请输入正确的11位手机号码'))
    } else {
      callback()
    }
  };

  export default {
    layout: 'full',
    data() {
      return {
        loginRuleForm: {
          phone: '',
          verification: '',
          username: '',
          password: '',
        },
        loginRules: {
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {required: true, trigger: 'blur', validator: validPhone}//这里需要用到全局变量
          ],
          verification: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 16, message: '密码长度控制在6到16位', trigger: 'blur'}
          ],
        }
      };
    },
    methods: {
      async loginSubmit(formName) {
        await this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post(`/user/register`, {
              phone: this.loginRuleForm.phone,
              loginName: this.loginRuleForm.username,
              password: this.loginRuleForm.password
            }).then(response => {
              if (response.data.message === '') {
                //登陆成功
                sessionStorage.setItem('loginInfo', JSON.stringify(response.data));
                this.$notify.success({
                  title: '登陆成功',
                  message: '即将跳转到系统首页',
                });
                setTimeout(function () {
                  location.href = '/';
                }, 1000)
              }
            });

          } else {
            this.$message({
              showClose: true,
              message: '提交信息不完整，请重新检查表单是否正确！',
              type: 'error',
              duration: 0
            });
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="scss">
  html, body, #__layout, .el-row, #__nuxt {
    height: 100%;
  }

  #login {
    height: 100%;
    background: url("~assets/images/login-bg.jpg") no-repeat;
    background-size: 100% 100%;
    .el-row {
      height: 100%;
      .el-col {
        height: 100%;
      }
      .left {
        display: table;
        .login-img {
          height: 100%;
          text-align: right;
          padding-right: 100px;
          display: table-cell;
          vertical-align: middle;
        }
      }
      .right {
        height: 100%;
        display: table;
        .login-right {
          display: table-cell;
          vertical-align: middle;
          .login-rule-form {
            position: relative;
            background: #fff;
            width: 500px;
            padding: 20px 0;
            .title {
              font-weight: bold;
              font-size: 24px;
              color: $main-style-red;
              text-align: center;
            }
            .sub-title {
              font-weight: normal;
              font-size: 18px;
              text-align: center;
              padding: 10px 0 20px 0;
            }
            .submit {
              margin-bottom: 0;
              button {
                width: 300px;
                background-color: $main-style-red;
                color: #fff;
                text-align: center;
              }
            }
            .forget {
              .el-form-item__content {
                &:after {
                  content: "";
                  clear: both;
                  display: table;
                }
              }
              .forget-password {
                float: left;
                color: #010000;
                font-size: 12px;
                cursor: pointer;
              }
              .registered {
                float: right;
                margin-right: 100px;
                color: $main-style-red;
                font-size: 12px;
                cursor: pointer;
              }
            }
            .tips {
              position: absolute;
              text-align: center;
              font-size: 12px;
              color: #e52a33;
              bottom: 0;
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  .footer-tips {
    position: absolute;
    bottom: 20px;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 18px;
    color: #fff;
  }

</style>
